<template>
  <div class="shoppingCar">
    <NavBar></NavBar>

    <van-empty
      image="search"
      description="暂无商品信息"
      v-show="shoppingId === null || shoppingId.length === 0"
    />

    <div class="item" v-for="(item, index) in carList" :key="item.id">
      <van-switch v-model="item.checked" />
      <div class="car-content">
        <div class="img">
          <img :src="item.thumb_path" alt="" />
        </div>
        <div class="detail">
          <div class="car-title">
            {{ item.title }}
          </div>
          <div class="car-detail">
            <span style="color:red;width:60px">￥{{ item.sell_price }}</span>
            <van-stepper
              v-model="item.cou"
              @change="changeCount"
              :name="item.id"
            />
            <span class="del" @click="del(index)">删除</span>
          </div>
        </div>
      </div>
    </div>

    <div class="allCount">
      <div class="left">
        <span>总计（不包含运费）</span>
        <span
          >已选择商品
          <span style="color:red;fontWeight: bold;">{{ number }}</span>
          件，总价￥<span style="color:red;fontWeight: bold;">{{
            sum.toFixed(2)
          }}</span>
          元</span
        >
      </div>
      <div class="right">
        <van-button color="#EF4F4F" type="danger" size="large"
          >去结算</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { getShopCarList } from "@/apis/shopcar.js";
import {
  getCarItemId,
  getItemId,
  setCarItemId,
  setItemId,
} from "@/utils/localData";
export default {
  data() {
    return {
      carList: [],
      shoppingId: getItemId(), //存放本地商品id
      checkedList: [],
      allChecked: [],
    };
  },
  computed: {
    number() {
      console.log(this.carList);
      setCarItemId(this.carList);
      this.allChecked = this.carList.filter((item) => item.checked === true);
      return this.allChecked.length;
    },
    sum() {
      return this.allChecked.reduce(
        (sum, item) => (sum += item.sell_price * item.cou),
        0
      );
    },
  },
  components: {
    NavBar,
  },
  methods: {
    // 当点击count时：更新本地存储的carList数据
    changeCount(val, name) {
      console.log(val, name);
      // 将id作为name属性带过来
      const id = name;
      // console.log(id.name, "res");
      // 获取到点击对象的下表
      const index = this.carList.findIndex((item) => {
        return item.id === id.name;
      });
      // console.log(index);
      this.carList[index].cou = val;
      // console.log("cou", this.carList[index].cou);
      setCarItemId(this.carList);
    },

    del(index) {
      this.carList.splice(index, 1);
      // console.log("this.carList", this.carList);
      this.shoppingId.splice(index, 1);
      // console.log(this.carList, this.shoppingId);
      setCarItemId(this.carList);
      setItemId(this.shoppingId);
      // console.log(this.shoppingId.length);
      this.$emit(
        "countNum",
        this.shoppingId.length === 0 ? null : this.shoppingId.length
      );
    },
  },
  async created() {
    this.$emit("act", 2);
    // setCarItemId([]);
    // 如果第一次没有数据
    if (!getCarItemId()) {
      console.log("我没数据");
      // const ids = getItemId();
      // this.carList = (await getShopCarList(ids)).data.message;
      // this.carList = this.carList.map((item) => {
      //   return {
      //     ...item,
      //     checked: true,
      //   };
      // });
      // setCarItemId(this.carList);
    } else {
      this.carList = getCarItemId();
    }
  },
};
</script>

<style lang="less" scoped>
.shoppingCar {
  margin-bottom: 100px;
}
.right {
  width: 110px;
  margin: 10px;
  // margin-left: 60px;
  .van-button {
    width: 100px;
    height: 50px;
    border-radius: 5px;
  }
}
.allCount {
  position: fixed;
  bottom: 50px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eeeeee;
  height: 100px;
  padding: 0 10px;
}
.left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  > span {
    margin: 7px 0;
    font-size: 14px;
  }
  > span:nth-child(1) {
    font-weight: bold;
    font-size: 18px;
  }
}
.van-switch {
  margin: 10px;
}
.van-stepper {
  margin: 0 15px;
}
.item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 10px 0;
  align-items: center;
  border-bottom: 1px solid #e3e3e5;
}
.car-title {
  color: #139eff;
  font-weight: bold;
  width: 230px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.detail {
  margin-left: 10px;
}
.car-detail {
  display: flex;
  margin: 10px 0 0;
  align-items: center;
  justify-content: flex-start;
  padding-right: 10px;
}
.car-content {
  display: flex;
  margin-left: 10px;
}
img {
  width: 60px;
  height: initial;
}
.detail {
  display: flex;
  flex-direction: column;
}
</style>
